Visual Studio Code (VS Code) is a lightweight and powerful source-code editor that can be used to develop Flutter applications. With the Flutter and Dart extensions installed, VS Code provides features such as code completion, syntax highlighting, debugging, device selection, hot reload, Flutter project creation, and access to Flutter DevTools.
Flutter officially supports VS Code and other Code OSS-based editors for Flutter development. VS Code can also be used to install and configure the Flutter SDK directly through the Flutter extension.
Visual Studio Code (VS Code) is a free, lightweight source-code editor developed by Microsoft. It supports many programming languages and frameworks through extensions.
For Flutter development, VS Code can be configured with the Flutter and Dart extensions.
VS Code provides a convenient development environment for Flutter applications. After installing the Flutter extension, developers can create, edit, run, debug, and test Flutter applications directly from the editor.
Before setting up VS Code for Flutter, make sure the required development tools are available.
| Tool | Purpose |
|---|---|
| Visual Studio Code | Code editor used for Flutter development |
| Flutter SDK | Provides Flutter framework, CLI tools, and development utilities |
| Dart SDK | Programming language used by Flutter; it is included with Flutter SDK |
| Git | Used for source-code management and is required by some Flutter setup workflows |
| Android Studio | Useful when developing and testing Flutter applications for Android |
| Android SDK | Provides Android development tools |
| Android Emulator | Allows Flutter Android applications to run on a virtual Android device |
The first step is to install Visual Studio Code on your computer.
VS Code can be used on operating systems such as Windows, macOS, and Linux.
After installing VS Code, restart it if required before installing Flutter extensions.
Git is commonly used for managing Flutter projects and is also used during some Flutter SDK installation workflows.
Open the terminal and run:
git --versionIf Git is installed correctly, the terminal displays the installed Git version.
git version 2.x.xLaunch Visual Studio Code after installation.
The main VS Code interface generally contains the following areas:
The Flutter extension provides Flutter development features inside VS Code. Installing the Flutter extension also installs the Dart extension.
Ctrl + Shift + X on Windows/Linux or Cmd + Shift + X on macOS.The Flutter extension provides Flutter-specific development support, while the Dart extension provides Dart language support.
| Extension | Purpose |
|---|---|
| Flutter | Provides Flutter development, debugging, project creation, device management, and Flutter-specific features. |
| Dart | Provides Dart language support, code analysis, completion, navigation, formatting, and debugging. |
Open the Extensions panel and verify that the Flutter extension is installed and enabled.
The Flutter SDK contains the tools required to create and run Flutter applications.
VS Code can assist with downloading and configuring Flutter.
Ctrl + Shift + POn macOS:
Cmd + Shift + PFlutter's current VS Code setup documentation describes this workflow as a quick way to install and configure Flutter. :contentReference[oaicite:1]{index=1}
PATH is an operating-system environment variable that tells the system where executable programs can be found.
When Flutter is added to PATH, commands such as flutter can be executed from the terminal.
flutter --versionIf Flutter is correctly configured, the command displays information about the installed Flutter SDK.
Open the VS Code terminal:
Terminal > New TerminalThen run:
flutter --versionYou can also run:
flutter doctorFor detailed diagnostic information, use:
flutter doctor -vThe Flutter Doctor command checks important parts of the development environment and reports configuration issues.
flutter doctor is one of the most useful commands for troubleshooting Flutter development environments.
flutter doctorThe command can report the status of areas such as:
flutter doctor -vThe -v option provides more detailed information.
After VS Code and Flutter are configured, you can create your first Flutter project.
Ctrl + Shift + P.Flutter.Flutter recommends using the lowercase_with_underscores naming convention for Flutter project names. :contentReference[oaicite:2]{index=2}
my_flutter_appYou can also create a Flutter application using the integrated terminal.
flutter create my_flutter_appMove into the project directory:
cd my_flutter_appOpen the project in VS Code:
code .If the code command is available in your system PATH, VS Code opens the current folder.
A typical Flutter project contains several important files and folders.
my_flutter_app/
│
├── android/
├── ios/
├── lib/
│ └── main.dart
├── test/
├── web/
├── linux/
├── macos/
├── windows/
├── pubspec.yaml
└── README.md| File/Folder | Purpose |
|---|---|
| lib/ | Main Dart application code is normally placed here. |
| lib/main.dart | Common entry point of a Flutter application. |
| pubspec.yaml | Defines project metadata, dependencies, assets, and other configuration. |
| android/ | Android-specific project files. |
| ios/ | iOS-specific project files. |
| web/ | Web-specific project files. |
| test/ | Automated test files. |
Open:
lib/main.dartA newly created Flutter project contains starter code that demonstrates a basic Flutter application.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('My Flutter App'),
),
body: const Center(
child: Text(
'Hello Flutter!',
style: TextStyle(fontSize: 24),
),
),
),
);
}
}
import 'package:flutter/material.dart';This imports Material Design widgets and other Flutter functionality.
void main() {
runApp(const MyApp());
}The main() function is the starting point of the Dart application.
runApp(const MyApp());runApp() places the root widget into the Flutter application.
MaterialApp(
home: Scaffold(...)
)MaterialApp provides the basic application structure and Material Design functionality.
Scaffold provides common screen structures such as:
After opening a Flutter project, the VS Code status bar displays Flutter-related information and the available target device.
Possible devices may include:
If VS Code displays No Devices, Flutter has not detected an available target device. Start an emulator, connect a physical device, or configure another supported target. :contentReference[oaicite:3]{index=3}
Once a device is available, you can run the Flutter application.
Press:
F5This starts the application in debug mode.
Run > Start Debuggingflutter runVS Code's Flutter integration supports running and debugging applications directly from the editor. :contentReference[oaicite:4]{index=4}
Hot Reload is one of Flutter's most useful development features. It allows developers to see many code changes in the running application without completely restarting the application.
Suppose your application contains:
Text(
'Hello Flutter!',
)Change it to:
Text(
'Welcome to Flutter!',
)Save the file or trigger Hot Reload.
The updated UI can appear without requiring a complete application restart.
| Feature | Hot Reload | Hot Restart |
|---|---|---|
| Speed | Very fast | Slower than Hot Reload |
| Application state | Generally preserves current state | Resets application state |
| Purpose | Quickly see UI/code changes | Restart the Flutter application |
| Common Usage | UI development | State initialization or larger changes |
VS Code includes an integrated terminal, allowing Flutter commands to be executed without opening a separate terminal application.
Terminal > New TerminalCommon Flutter commands include:
flutter --version
flutter doctor
flutter doctor -v
flutter devices
flutter emulators
flutter pub get
flutter run
flutter clean
flutter analyze| Command | Purpose |
|---|---|
flutter --version | Displays Flutter version information. |
flutter doctor | Checks the Flutter development environment. |
flutter doctor -v | Displays detailed diagnostic information. |
flutter devices | Lists available devices. |
flutter emulators | Lists configured emulators. |
flutter create app_name | Creates a new Flutter project. |
flutter pub get | Gets project dependencies. |
flutter run | Runs the Flutter application. |
flutter clean | Removes generated build files. |
flutter analyze | Analyzes the Dart/Flutter project for issues. |
If you want to develop Flutter applications for Android, you can use an Android Emulator.
flutter devices.Android Studio is not required for editing Flutter code in VS Code, but it is commonly used to install and manage Android SDK components and emulators when Android is a target platform.
Run:
flutter devicesFlutter displays the devices available for running applications.
2 connected devices:
Chrome
Android Emulator
If the required device is listed, it can be selected from the VS Code device selector.
F5.Alternatively:
flutter runVS Code provides built-in debugging functionality for Flutter applications.
F5or:
Run > Start DebuggingA breakpoint pauses program execution at a particular line of code. Developers can inspect variables and program flow while debugging.
void calculateTotal() {
int price = 100;
int quantity = 5;
int total = price * quantity;
print(total);
}
A breakpoint can be placed on:
int total = price * quantity;When the debugger reaches that line, execution pauses and the developer can inspect the values.
Flutter DevTools is a collection of debugging and performance tools for Flutter and Dart applications.
VS Code can launch DevTools while a Flutter application is being debugged.
The Flutter extension and Dart extension provide integration for using DevTools from VS Code. :contentReference[oaicite:5]{index=5}
The Flutter Inspector allows developers to inspect the widget tree of a running Flutter application.
MaterialApp
|
└── Scaffold
|
├── AppBar
|
└── Center
|
└── TextThe Inspector helps developers understand how widgets are structured and identify layout-related issues.
The Dart and Flutter extensions provide intelligent code completion.
When you start typing:
Container(
VS Code can provide suggestions for properties such as:
VS Code can display quick fixes for certain Dart and Flutter problems.
Use:
Ctrl + .On macOS:
Cmd + .Flutter/Dart code can be automatically formatted.
Shift + Alt + FOn macOS, the shortcut may differ depending on the VS Code configuration.
You can also format Dart code from the Command Palette.
Flutter projects can be analyzed using:
flutter analyzeThis helps identify problems such as:
Flutter applications can use external packages from the Dart and Flutter ecosystem.
Dependencies are normally added to:
pubspec.yamldependencies:
flutter:
sdk: flutter
http: ^1.0.0
After modifying dependencies, run:
flutter pub getVS Code provides built-in Git integration.
The Source Control panel can be used to:
git init
git status
git add .
git commit -m "Initial Flutter project"
git branch
git pushVS Code provides many settings that can improve the Flutter development experience.
Ctrl + ,You can search for settings related to:
| Extension/Tool | Purpose |
|---|---|
| Flutter | Flutter development support. |
| Dart | Dart language support. |
| Git | Version-control workflow support. |
| GitHub integration | Useful for GitHub-based development workflows. |
Install only the extensions that are useful for your project. Too many unnecessary extensions can make the editor harder to manage.
If you run:
flutter --versionand the terminal says that Flutter is not recognized, the Flutter SDK may not be available in the PATH.
bin directory is available in PATH.Flutter's documentation specifically notes that command-line Flutter usage requires the Flutter SDK to be added to the system PATH. :contentReference[oaicite:6]{index=6}
If VS Code shows:
No DevicesFlutter has not detected a target device.
flutter doctor.flutter devices.If Flutter features are not appearing in VS Code:
Flutter: Run Flutter Doctor from the Command Palette.VS Code's Flutter documentation provides a Command Palette action for running Flutter Doctor and displaying the diagnostic output inside VS Code. :contentReference[oaicite:7]{index=7}
If you are targeting Android and Flutter Doctor reports Android toolchain problems, check:
Run:
flutter doctorFollow the diagnostic instructions shown by Flutter.
You can run Flutter Doctor directly from VS Code.
This is useful because you can diagnose your Flutter environment without leaving VS Code.
The following example demonstrates a simple Flutter application that can be created and executed using VS Code.
import 'package:flutter/material.dart';
void main() {
runApp(const CounterApp());
}
class CounterApp extends StatelessWidget {
const CounterApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Counter App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
),
useMaterial3: true,
),
home: const CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int counter = 0;
void incrementCounter() {
setState(() {
counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Counter'),
),
body: Center(
child: Text(
'Count: $counter',
style: const TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: incrementCounter,
child: const Icon(Icons.add),
),
);
}
}
class CounterPage extends StatefulWidgetA StatefulWidget is useful when the UI needs to change during the application's lifetime.
int counter = 0;This variable stores the current counter value.
setState(() {
counter++;
});setState() tells Flutter that the state has changed and the affected widget should be rebuilt.
FloatingActionButton(
onPressed: incrementCounter,
child: const Icon(Icons.add),
)The button executes incrementCounter() when the user taps it.
F5.incrementCounter().counter variable.VS Code provides a Problems panel that displays detected issues.
Open it using:
View > ProblemsShortcut:
Ctrl + Shift + MThe panel can display errors, warnings, and other analyzer messages.
If you already have a Flutter project, you can open it in VS Code.
pubspec.yaml.flutter pub get if required.The project root should normally be the folder containing pubspec.yaml. :contentReference[oaicite:8]{index=8}
After opening an existing project, run:
flutter pub getThis retrieves the dependencies specified in pubspec.yaml.
Install Git
↓
Install VS Code
↓
Open VS Code
↓
Install Flutter Extension
↓
Dart Extension Installed
↓
Install/Configure Flutter SDK
↓
Add Flutter to PATH
↓
Restart VS Code
↓
Run flutter doctor
↓
Configure Target Device
↓
Create Flutter Project
↓
Open lib/main.dart
↓
Select Device
↓
Press F5
↓
Run Flutter Application
↓
Use Hot Reload
↓
Debug with DevToolsSuppose you want to create a Flutter application named student_app.
VS Codeflutter --versionflutter doctorflutter create student_appcd student_appcode .flutter runText(
'Welcome to Student App',
)Save the file and use Flutter Hot Reload to see the updated UI.
| Shortcut | Purpose |
|---|---|
Ctrl + Shift + P | Open Command Palette |
Ctrl + Shift + X | Open Extensions |
Ctrl + Shift + M | Open Problems |
Ctrl + , | Open Settings |
F5 | Start Debugging |
Ctrl + . | Open Quick Fix/Code Actions |
Shift + Alt + F | Format Document on Windows/Linux |
flutter --version worksflutter doctor runs successfullypubspec.yaml detectedflutter pub get after dependency changes.flutter doctor.VS Code is a lightweight source-code editor that can be extended to support Flutter and Dart development.
The Flutter extension is the primary extension, and installing it also installs the Dart extension.
Flutter SDK contains the Flutter framework and development tools required to create, build, test, and run Flutter applications.
flutter doctor checks the Flutter development environment and reports configuration problems.
Open the Command Palette, select Flutter: New Project, choose the Application template, select the project location, and provide a valid project name.
You can press F5, select Run > Start Debugging, or execute flutter run in the terminal.
Hot Reload allows developers to quickly see many code changes in a running Flutter application while preserving the current application state.
Flutter DevTools is a collection of debugging, inspection, and performance tools for Flutter and Dart applications.
pubspec.yaml contains project metadata and configuration such as dependencies and assets.
Start or connect a supported device, then use flutter devices or flutter doctor to diagnose device and environment issues.
# Check Flutter
flutter --version
# Check configuration
flutter doctor
# Detailed configuration
flutter doctor -v
# List devices
flutter devices
# List emulators
flutter emulators
# Create project
flutter create my_app
# Open project
code .
# Install dependencies
flutter pub get
# Analyze project
flutter analyze
# Run project
flutter run
# Clean project
flutter clean
For structured Flutter learning, course learners can explore the JustAcademy Flutter Training course:
Students who want to explore a course demo can use:
Register for Flutter Course Demo
Setting up VS Code for Flutter involves installing VS Code and Git, adding the Flutter extension, configuring the Flutter SDK, verifying the environment with flutter doctor, creating a Flutter project, selecting a target device, and running the application.
Once the setup is complete, VS Code provides an efficient Flutter development environment with features such as intelligent code completion, code analysis, debugging, Hot Reload, device selection, Flutter Inspector, and DevTools.
The basic development workflow can be summarized as:
VS Code
↓
Flutter Extension
↓
Dart Extension
↓
Flutter SDK
↓
Flutter Doctor
↓
Target Device
↓
Flutter Project
↓
Run & Debug
↓
Hot Reload
↓
Flutter DevToolsWith this environment properly configured, developers can start building, testing, debugging, and maintaining Flutter applications directly from VS Code.
